interface Props {
	data: any;
}

import { Table } from "antd";
import styles from "./index.module.less";
import { useEffect, useState } from "react";
import { getDiscountUseRecords } from "@/api/modules/discount";

export default (props: Props) => {
	const [tableData, setTableData] = useState<any>([]);
	const info = props.data ?? {};
	const handleRequest = async () => {
		const requestData: any = {
			code: info.code
		};

		const res = await getDiscountUseRecords(requestData);
		setTableData(res.data);
	};

	useEffect(() => {
		handleRequest();
	}, []);

	const columns = [
		{
			title: "使用记录",
			dataIndex: "record",
			key: "record",
			render: (text, record, index) => index + 1 // `index` 是 Table 的内置参数，表示行号
		},
		{
			title: "用户名",
			dataIndex: "username",
			key: "username"
		},
		{
			title: "使用时间",
			dataIndex: "updated_at",
			key: "updated_at"
		},
		{
			title: "订单编号",
			dataIndex: "order_id",
			key: "order_id"
		}
	];
	return (
		<div className={styles.container}>
			<div className={styles.title}>
				<div>使用信息</div>
				<div className={styles.extraInfo}>
					已使用<span>{tableData.length}</span>次，剩余<span>{info?.max_uses - tableData.length || 0}</span>次
				</div>
			</div>
			<div className={styles.content}>
				<Table dataSource={tableData} columns={columns} />
			</div>
		</div>
	);
};
